<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_使用jsx创建虚拟DOM</title>
</head>
<body>
    <!-- 1.准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel 用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 一定要写babel -->
   <script type="text/babel">
      // 1.创建虚拟DOM
     //   此处一定不要写引号 因为不是字符串
      const VDOM = (
        <div>
          <h1>
            <span style={{fontSize: '30px'}}>Hello React</span>
          </h1>
          <h1>
            <span style={{fontSize: '30px'}}>Hello React</span>
          </h1>
        </div>
      )
      // 2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM,document.getElementById('test'));
      /* 
          jsx语法规则: 
              1.  1.定义虚拟DOM时,不要写引号
              2.标签中混入JS表达式时要用{}
              3.样式的类名指定不要用class 要用className
              4.内联样式 要用style={{key:value}}的形式去写
              5.虚拟DOM必须只有一个根标签
              6.标签必须闭合
              7.标签首字母
              2.标签中混入JS表达式时要用{}
              3.样式的类名指定不要用class 要用className
              4.内联样式 要用style={{key:value}}的形式去写
              5.虚拟DOM必须只有一个根标签
              6.标签必须闭合
              7.标签首字母
                  (1) 若小写字母开头,则将该标签转化成html中的同名元素 若html没有同名元素 则报错
                  (2) 若大写字母 react则去渲染对应的组件 若组件没有定义 则报错
       */
   </script>
</body>
</html>